<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        :otherParams="{ orderStatusInList: '1,2,3,4' }"
        uniqueId="mesProdOrderTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
      size="60%"
    >
    </ele-form-drawer>

    <!-- 模态框 -->
    <barcodePrintingAddModel
      ref="barcodePrintingAddModel"
      :title="modelTitle"
      @refreshList="getListArr()"
    >
    </barcodePrintingAddModel>

    <!-- 补打模态框 -->
    <!-- <repairPrintModel
      ref="repairPrintModel"
      :title="modelTitle"
      @refreshList="getListArr()"
    ></repairPrintModel> -->
  </div>
</template>

<script>
import { searchConfig, formDescDialog, rowConfig, config } from "./config";
import {
  getList,
  getInfo,
  getProdOrderStatusList,
} from "@/api/trackingcardprint/mesTrackingCardPrint";
import { getProdOrderTypeList } from "@/api/print/mesProdOrder";
import barcodePrintingAddModel from "./components/barcodePrintingAddModel";
import { popover } from "@/utils/judge";
import repairPrintModel from "./components/repairPrintModel.vue";
import { regetTrackingMsgList } from "@/api/trackingcardprint/mesTrackingCardPrintingHistory";

export default {
  name: "mesTrackingCardPrint",
  components: {
    barcodePrintingAddModel,
    repairPrintModel,
  },
  mixins: [searchConfig, config],
  data() {
    const _this = this;
    return {
      modelTitle: "",
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, //新增修改框
      // searchConfig,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        {
          prop: "planCode",
          label: $i18n.t("mesTrackingCardPrint.planCode"),
          fixed: "left",
          minWidth: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "orderCode",
          label: $i18n.t("mesTrackingCardPrint.orderCode"),
          fixed: "left",
          minWidth: 200,
          // showOverflowTooltip: true,
          render: (h, scope) => {
            return popover(scope.row.orderCode, h, "", () =>
              _this.goChild({ orderCode: scope.row.orderCode })
            );
          },
        },

        {
          prop: "prodCode",
          label: $i18n.t("mesTrackingCardPrint.prodCode"),
          minWidth: 150,
          showOverflowTooltip: true,
        },
        {
          prop: "prodName",
          label: $i18n.t("mesTrackingCardPrint.prodName"),
          minWidth: 230,
          showOverflowTooltip: true,
        },
        {
          prop: "printedNum",
          label: $i18n.t("mesTrackingCardPrint.printedQuantity"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        // {
        //   prop: "notPrintedNum",
        //   label: $i18n.t("mesTrackingCardPrint.notPrintedQuantity"),
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "priority",
        //   label: "工单优先级",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },

        {
          prop: "quantity",
          label: $i18n.t("mesTrackingCardPrint.quantity"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "actualQuantity",
          label: $i18n.t("mesTrackingCardPrint.actualQuantity"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "prodOrderType",
          label: $i18n.t("mesTrackingCardPrint.prodOrderType"),
          minWidth: 180,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getProdOrderTypeList();
            return list.data.result;
          },
        },
        {
          prop: "orderStatus",
          label: $i18n.t("mesTrackingCardPrint.orderStatus"),
          minWidth: 140,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getProdOrderStatusList();
            return list.data.result;
          },
        },

        {
          prop: "planBeginDate",
          label: $i18n.t("mesTrackingCardPrint.planBeginDate"),
          minWidth: 140,
          showOverflowTooltip: true,
        },

        {
          prop: "workshopName",
          label: $i18n.t("common.workshopName"),
          width: 180,
        },
        {
          prop: "lineName",
          label: $i18n.t("common.lineName"),
          minWidth: 200,
          showOverflowTooltip: true,
        },
        // {
        //   prop: "orderBarcodeRuleName",
        //   label: "条码生成规则",
        //   minWidth: 200,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "isRunning",
        //   label: "是否正在执行接口",
        //   minWidth: 220,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getIsRunningList();
        //     return list.data.result;
        //   },
        // },
        {
          prop: "measureUnits",
          label: $i18n.t("mesTrackingCardPrint.measureUnits"),
          minWidth: 110,
          showOverflowTooltip: true,
        },
        {
          prop: "measureUnitsCode",
          label: $i18n.t("mesTrackingCardPrint.measureUnitsCode"),
          minWidth: 140,
          showOverflowTooltip: true,
        },
        // {
        //   prop: "deliveryDate",
        //   label: "交货期",
        //   minWidth: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "slackTime",
        //   label: "交货期宽裕天数",
        //   minWidth: 130,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "prepositionCode",
        //   label: "前置工单号",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "prepositionType",
        //   label: "前置工单类型",
        //   minWidth: 100,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getPrepositionTypeList();
        //     return list.data.result;
        //   },
        // },
        {
          prop: "operate",
          label: $i18n.t("common.operation"),
          width: 120,
          fixed: "right",
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              ></ele-row-operation>
            );
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    getListArr() {
      //this.$refs.barcodePrintingAddModel.visible = false;
      this.refresh(false);
    },
    //表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name;
      const fnc = {
        add: () => {
          this.changeMaster(false);
          this.formDataDialog = {};
          this.visible = true;
        },
        // delete: () => {
        //   this.$confirm("此操作将删除该生产工单, 是否继续?", $i18n.t('common.tip'), {
        //     confirmButtonText: $i18n.t('common.ok'),
        //     cancelButtonText: $i18n.t('common.cancel'),
        //     type: "warning",
        //   }).then(() => {
        //     const ids = rows.map((val) => val.id).join(",");
        //     this.rowDel(ids);
        //   });
        // },
        // 打印跟踪卡
        printBoxCode: () => {
          //生成打印箱码
          this.modelTitle = name;
          this.$refs.barcodePrintingAddModel.init({
            ...rows[0],
            barcodePrintTemp: rows[0].barcodePrintTemp,
            count: rows[0].boxCount || "",
          });
        },
        // 补打
        repairPrint: async () => {
          this.modelTitle = name;

          let res1 = await regetTrackingMsgList({
            orderCodeList: [rows[0].orderCode],
          });

          this.$refs.repairPrintModel.init({
            ...rows[0],
            ...res1.data.result[0],
            barcodePrintTemp: rows[0].barcodePrintTemp,
            quantity: 0,
          });
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        show: () => {
          // 查看详情，并打开界面
          this.editInfo(row.id, true);
        },
        edit: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, false);
        },
        multiAdd: () => {
          this.goMultiAdd({ id: row.id });
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      this.isLoading = true;
      this.formDataDialog.id ? this.rowUpdate(data) : this.rowCreate(data);
    },
    //新增
    rowCreate(data) {
      rowCreate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.addSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    // 修改详情
    editInfo(id, flag) {
      this.changeMaster(flag);
      this.loading = true;
      getInfo(id)
        .then((res) => {
          this.formDataDialog = res.data.result;
          this.visible = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //修改
    rowUpdate(data) {
      rowUpdate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.editSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    //删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    //跳转至子页面
    goChild(queryParam) {
      let pathParam = "/barcodeprint/mesBarcodeprintHistory";
      this.$router.push({ path: pathParam, query: queryParam });
    },
    // 跳转至批量新增页面
    goMultiAdd(queryParam) {
      let pathParam = "/print/mesProdOrderAdd";
      this.$router.push({ path: pathParam, query: queryParam });
    },
    changeMaster(flag) {
      if (flag) {
        formDescDialog.disabled = true;
        formDescDialog.isShowSubmitBtn = false;
      } else {
        formDescDialog.disabled = false;
        formDescDialog.isShowSubmitBtn = true;
      }
    },
  },
};
</script>
